<!--柱状图-->
<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="时间">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 350px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"

            >导出</el-button>
        </el-form-item>
      </el-form>
      <h2>读码率统计</h2>
      <div id="chart_example"></div>

      <el-dialog
          title="读码器明细"
          :visible.sync="dialogVisible"
          style="width:1800px;"
          >
          <el-table :data="BcrReadItems" stripe ref="table" :header-cell-class-name="cellClass" @close="userDialogVisibleA()" style="width: 100%;" >
                <!-- <el-table-column type="selection" width="55" v-model="multipleSelection1"  ></el-table-column> -->
                <!-- <el-table-column prop="lineNo" fixed width="80" label="行号"></el-table-column>  -->
                  <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="BCR编号" min-width="120" align="center" prop="bcr"  />
                <el-table-column label="总数量" min-width="120" align="center" prop="readSum"  />
                <el-table-column label="成功数量" min-width="120" align="center" prop="readSuccess"  />
                <el-table-column label="失败数量" min-width="120" align="center" prop="noRead"  />
                <el-table-column label="读码率(%)" min-width="120" align="center" prop="readRate"/>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams1.pageNum"
            :limit.sync="queryParams1.pageSize"
            @pagination="getBcrReadItems"
          />
      </el-dialog>

      </div>




</template>

<script>
  import echarts from 'echarts'
  // require('echarts/theme/macarons')   // echarts theme
  import resize from './mixins/resize'
  import { exportRead, listBcrRead } from '@/api/system/WorkLog'


  const animationDuration = 3000

  export default {
    mixins: [resize],
    name: "BcrRead",
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        // 日期范围
        dateRange: [],
        // 总条数
        total: 0,
        MapList:[],
        rows:[],
        BarList:[],
        readRate:[],
        bcr:[],
        BcrReadItems:[],
        chart: null,
        dialogVisible: false,
        queryParams: {
          // pageNum: 1,
          // pageSize: 10,
          readRate: undefined,
          bcr: undefined,
        },
        queryParams1: {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    created() {
      this.getBarList();
    },
    methods: {
      getBarList() {
        this.loading = true;
        listBcrRead(this.addDateRange(this.queryParams, this.dateRange)).then( response => {
          this.MapList =response.rows;
          let MapList = this.MapList;
          this.readRate=[];
          this.bcr=[];
          if(MapList){
            let obj = eval(MapList);

            for(let i=0;i<obj.length;i++){
              this.readRate.push(MapList[i].readRate);
            }
            for(let i=0;i<obj.length;i++){
              this.bcr.push(MapList[i].bcr);
            }
          }

          //动态插入数据时，数据在这里设置更新
          this.chart.setOption({
            yAxis: {
              data: this.bcr,
              axisTick:{
                show:false
              }
            },
            series: [{
              name:'读码率',
              data: this.readRate,
            },
            ]
          });
        });
      },
      initChart() {
        let that=this;
        // this.chart = echarts.init(this.$el, 'macarons')
        this.chart = echarts.init(document.getElementById('chart_example'));

        this.chart.setOption({
          color: ['#00CC33'],
          tooltip : {
          trigger: 'axis',
          formatter: '{b}<br />{a0}: {c0}%<br />',
          axisPointer : {
            type : 'shadow'
          }
        },
          grid: {
            top: 60,
            left: '4%',
            right: '10%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            name:'百分比(%)',
            type: 'value',
          }],
          yAxis: [{
            name:'BCR编号',
            type: 'category',
          }],
          legend: {

          },
          series: [{
            type: 'bar',
            barWidth: '40%',
            label: {
              normal: {
                  show: true,
                  position: 'insideRight',
                  formatter: '{c}%'
              }
            },
          },
          ]
        })


       this.chart.on('click', function (params) {
           that.dialogVisible = true;
           that.getBcrReadItems();
        });
      },


       /** 搜索按钮操作 */
      handleQuery() {
        this.getBarList();
      },

      cellClass(row){
            if (row.columnIndex === 0) {
            return 'disabledCheck'
            }
        },
       /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.handleQuery();

      },

      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      getBcrReadItems(){
        this.loading = true;
          listBcrRead(this.addDateRange(this.queryParams1, this.dateRange)).then(
          response => {
          this.BcrReadItems = response.rows;
          this.total = response.total;
          this.loading = false;
      });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportRead(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
      }

    }
  }
</script>
<style scoped>
  h2{
    text-align: center;
    padding: 0px;
    font-size: 18px;
    }
  #chart_example{
    width: 100%;
    height: 60vh;
    /* border: 1px solid	#3398DB; */
    margin: 0 auto;
  }
</style>
